<template>
	<view class="main">
		<u-navbar :is-back="true" title="个人信息" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000"></u-navbar>
		<view class="phone2">
			<view>更换头像</view>
			<view class="img">
				<view class="img_l" @click="upimg">
					<image :src="url" mode=""></image>
				</view>
				<view class="img_r">
					<image src="../../../static/images/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="phone">
			<view>更换昵称</view>
			<input class="phone_r" type="text" v-model="name" />
		</view>
		<view class="button" @click="changeinfo">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#FFFFFF',
				},
				url: '',
				name: '',
				head: '',
				level: ''
			}
		},
		onLoad() {
			this.getlevel()
		},
		methods: {
			//权限
			getlevel() {
				global.$http.request({
					url: '/api/User/info',
					data: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data[0].header);
						this.name = res.data.data[0].nickname
						this.url = res.data.data[0].header
						this.level = res.data.data
					}
				})
			},
			//上传图片
			upimg() {
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						global.$http.upload('/api/upload/upload', {
							filePath: tempFilePaths[0], // 要上传文件资源的路径。
							name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						}).then(res => {
							console.log(res);
							that.url = res.data.data.src
							that.head = res.data.data.thumb
						})
					}
				});
			},
			changeinfo() {
				global.$http.request({
					url: '/api/User/update',
					data: {
						token: uni.getStorageSync('token'),
						nickname: this.name,
						head: this.head
					}
				}).then(res => {
					if (res.data.code = 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 700
						})
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},700)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {

			.phone {
				margin-top: 10rpx;
				width: 750rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				padding: 47rpx 30rpx;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;

				.phone_r {
					color: #666666;
					text-align: right;
					input{
					}
				}
			}

			.phone2 {
				margin-top: 10rpx;
				width: 750rpx;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;

				.img {
					display: flex;
					align-items: center;

					.img_l {
						padding-right: 20rpx;

						image {
							border-radius: 50%;
							width: 80rpx;
							height: 80rpx;

						}
					}

					.img_r {
						image {
							width: 8rpx;
							height: 14rpx;
						}
					}
				}
			}

			.button {
				width: 750rpx;
				height: 98rpx;
				background: #11D1A8;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 98rpx;
				position: fixed;
				bottom: 0;
			}
		}
	}
</style>
